<template>
	<view>
		<!-- <scroll-view scroll-y="true"> -->
			<view class="list">
				<view class="list-item">
					<text style="color: red;">*</text>
					<text>联系人名：</text>
					<input type="text" placeholder="请输入姓名" v-model="params['联系人姓名']">
				</view>
				<view class="list-item">
					<text style="color: red;">*</text>
					<text>联系电话：</text>
					<input type="number" placeholder="请输入电话" v-model="params['联系人电话']">
				</view>
				<view class="list-item">
					<text style="color: red;">*</text>
					<text>报事地址：</text>
					<input type="text" placeholder="请输入报修地址" v-model="params['报事位置']">
				</view>
				<view class="list-item">
					<text style="color: #fff;">*</text>
					<text>上门时间：</text>
					<my-picker ref="picker" :value="time" @input="pickerchange" />
				</view>
				<!-- <view class="list-item no_required">
					<text class="left-text" style="margin-right: 14rpx;">上门时间：</text>
					<my-picker ref="picker" :value="time" @input="pickerchange" />
				</view> -->
				<view class="list-item">
					<text style="color: #fff;">*</text>
					<text>完成时限：</text>
					<input type="number" placeholder="请输入完成时限" v-model="params['时限']">
				</view>
				<view class="list-item">
					<text style="color: #fff;">*</text>
					<text>时限类型：</text>
					<!-- <input type="text" placeholder="请输入装修地址"> -->
					<view class="type" @click="handleTap('picker3')">{{label3}}</view>
					<lb-picker ref="picker3" mode="selector" :list="delayTypeList" :dataset="{ name: 'label3' }"
					 @change="handleChange" @confirm="handleConfirm3" @cancel="handleCancel">
					</lb-picker>
				</view>
				<view class="list-item">
					<text style="color: red;">*</text>
					<text>报事类型：</text>
					<!-- <input type="text" placeholder="请输入装修地址"> -->
					<view class="type" @click="handleTap('picker')">{{label}}</view>
					<lb-picker ref="picker" v-model="params['工单类型']" mode="selector" :list="gridSocialType" :dataset="{ name: 'label' }"
					 @change="handleChange" @confirm="handleConfirm" @cancel="handleCancel">
					</lb-picker>
				</view>
				<view class="list-item">
					<text style="color: red;">*</text>
					<text>所属小区：</text>
					<!-- <input type="text" placeholder="请输入装修地址"> -->
					<view class="type" @click="handleTap('picker1')">{{label1}}</view>
					<lb-picker ref="picker1" v-model="params['所属项目id']" mode="selector" :list="projectList" :dataset="{ name: 'label1' }"
					 @change="handleChange" @confirm="handleConfirm" @cancel="handleCancel">
					</lb-picker>
				</view>
				<view class="list-item" v-if="personType == 1">
					<text style="color: #fff;">*</text>
					<text>处理人员：</text>
					<!-- <view class="type" @click="handleTap('picker2')">{{label2}}</view>
					<lb-picker v-model="params['接单人id']" ref="picker2" mode="selector" :list="operatorList" :dataset="{ name: 'label2' }"
					 @change="handleChange" @confirm="handleConfirm" @cancel="handleCancel">
					</lb-picker> -->
					<song-data-picker :bigText="true" :noPadding="true" placeholder="请选择处理人员" :showArrow="false" :border="false" ref="songPicker" :localdata="operatorList" popup-title="请选择" :openSearch="true" @change="onChange" @nodeclick="onnodeclick"></song-data-picker>
				</view>
				<view style="border-bottom: 2rpx solid #f5f5f5;padding-bottom: 16rpx;">
					<textarea class="text" fixed value="" placeholder="请输入报事描述(必填)..." v-model="params['报事描述']" />
					<uploader :max="3" ref="uploader" @input='onchange' />
				</view>
				<button class="btn trouble" style="margin-top: 20rpx;" @click="handleSumbit">提交</button>
			</view>
		<!-- </scroll-view> -->
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker/index.vue'
	import dyDatetimePicker from '@/components/lanxiujuan-dyDateTime/lanxiujuan-dyDateTime'
	import uploader from '@/components/my-components/image-uploader.vue'
	import myPicker from '@/components/my-components/time-picker.vue'
	import { mapState,mapGetters } from 'vuex'
	export default {
		components: {
			LbPicker,
			dyDatetimePicker,
			uploader,
			myPicker
		},
		props: {
			projectList: {
				type: Array,
				default: () => []
			},
			operatorList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				delayTypeList: this.$type.delayTypeList,
				// operatorList: [],
				params: {
					接单人id: null,
					机构id: this.$config.groupId,
					操作类型: 'submit',
					工单类型: '',
					联系人姓名: '',
					联系人电话: '',
					报事描述: '',
					报事位置: '',
					上门时间: '',
					所属项目id: 45,
					报事附件: [],
					来源: 5,
					时限: null,
					时限单位: '',
				},
				params1: {
					功能模块: ['工单管理'],
					单位id: null,
					状态: 1
				},
				value: '',
				label: '',
				value1: '',
				label1: '',
				label2: '',
				label3: '',
				chooseImg: [],
				gridSocialType: this.$type.gridSocialType,
				file: {
					fileData: null,
					fileName: null
				},
				fileIds: [],
				time: '请选择上门时间'
			}
		},
		computed: {
			...mapGetters(['personType'])
		},
		created() {
			this.params.联系人姓名 = uni.getStorageSync('userInfo').name
			this.params.联系人电话 = uni.getStorageSync('userInfo').mobile
			// this.params.接单单位id = uni.getStorageSync('currentUnitId')
			// this.getOperatorList()
		},
		methods: {
			onChange(e) {
				this.params['接单人id'] = e.detail.value[0].id
			},
			getOperatorList() {
				if(this.personType !== 3) {
					this.params1.单位id = uni.getStorageSync('currentUnitId')
				}
				this.$http2.post('worksys/worker/list', this.params1).then(res => {
					console.log(res, '处理人员')
					if (res.code === 10000) {
						if (res.data.list !== null) {
							res.data.list.forEach(item => {
								item.value = item.id
								item.label = item.人员名称
							})
							// this.operatorList = res.data.list.filter(item => {
							// 	return item.id !== this.接单人id
							// })
						}
						this.operatorList = res.data.list
					}
				})
			},
			pickerchange(e){
				this.time = e
				this.params.上门时间 = e
			},
			onchange(e) {
				this.params.报事附件 = e
				// console.log(e)
			},
			getData(time) {
				// this.params.上门时间 = time
				console.log(time)
			},
			handleCancel(e) {
				uni.showTabBar({
					animation: true
				})
				console.log('cancel::', e)
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleChange(e) {
				console.log('change::', e)
			},
			handleConfirm(e) {
				// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
				console.log('confirm::', e)
				if (e) {
					const name = e.dataset.name
					const label = e.item.label
					if(name === 'label1' && this.personType === 1) {
						this.$refs.songPicker.inputSelected = []
						this.params.接单人id = null
						this.$emit('init', this.params.所属项目id)
					}
					if (name && label) {
						this[name] = label
					}
				}
			},
			handleConfirm3(e) {
				if(e) {
					const name = e.dataset.name
					const label = e.item
					console.log(e)
					this.params.时限单位 = e.value
					// this.params.unit = e.item.id
					// this.params4.education = e.item.id
					if(name && label){
						this[name] = label
					}
				}
			},
			handleSumbit() {
				console.log(this.params)
				if(this.params.时限 === '') {
					this.params.时限 = null
				}
				this.params.时限 = this.params.时限 && parseInt(this.params.时限)
				let params = JSON.parse(JSON.stringify(this.params))
				if(params.时限单位 === '小时') {
					params.时限 = params.时限 * 60
				}else if(params.时限单位 === '天') {
					params.时限 = params.时限 * 1440
				}
				this.$emit('submit', params)
			}
		}
	}
</script>

<style lang="scss">
.trouble {
	margin-bottom: 60rpx;
}
</style>